<template>
    <div class="login_page">
        <div class="login_from">
              <p class="form_title">手机：</p>
              <input class="form_input" v-model="username" type="number" placeholder="请输入手机号">
              <p class="form_title">密码：</p>
              <input class="form_input" type="password" placeholder="密码">
              <p class="form_title">验证码：</p>
              <input class="form_input check_input" type="text" placeholder="验证码">
              <div class="login_btn check_btn" >获取验证码</div>
              <br/>
              <div class="login_btn register_btn" @click="go_login">登  录</div>
              <div class="login_btn" @click="register">注  册</div>
        </div>
    </div>
</template>
<script>
import {_fakeRegister} from '../api'
import Message from '../components/message'
export default {
    name: 'login',
    data () {
        return {
          username: null
        }
    },
    methods: {
      // 注册
      register () {
        let vm = this
        if (!vm.username) return
        _fakeRegister({
          name: vm.username
        }).then(res => {
          if (res.code <= 0) {
            new Message({
              type: 'error',
              text: res.message
            })
          } else {
            new Message({
              type: 'success',
              text: '注册成功，请登录'
            })
            vm.go_login()
          }
        })
      },
      // 去登陆
      go_login () {
        this.$router.push({name: "login"})
      }
    }
}
</script>
<style lang="less" scoped>
 .login_page {
    width: 100%;
    height: 100%;
    background-image: url('../assets/bg.jpg');
    background-size:cover;
    .login_from {
      width: 80%;
      height: 450px;
      border: 1px solid #5a825d;
      border-radius: 12px;
      position: relative;
      top: calc(~"50% - 230px");
      left: 10%;
      background-color: rgba(200, 200, 200, .2);
      text-align: center;
      box-sizing: border-box;
      padding: 40px 10px 20px 10px;

      .form_title {
        font-size: 24px;
        text-align: left;
        padding-left: 20px;
        color: #334745;
      }
      .form_input {
        font-size: 20px;
        width: 80%;
        padding: 0 10px 0 10px;
        margin: 10px 0 20px 0 ;
        outline:none;
        border: none;
        line-height: 30px;
        color:#ff5c00;
        border-radius: 8px;
      }
      .login_btn {
        background-color: #ff5c00;
        font-size: 20px;
        display: inline-block;
        padding: 8px 26px 10px;
        color: #fff;
        line-height: 1;
        text-decoration: none;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
        text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
        border-bottom: 1px solid rgba(0,0,0,0.25);
        position: relative;
        overflow: visible;
        width: auto;
        margin-top: 40px;
      }
      .register_btn {
        background-color: #2f4e47;
        margin-right: 20px;
      }
      .check_input {
          width: 40%;
      }
      .check_btn {
          font-size: 16px;
          padding: 8px 14px;
          position: relative;
          left: 10px;
          top: -2px;
      }
    }
  }
</style>


